<template>
  <div class="app-container">
    <div>
      错误总览：
    </div>
    <div class="top">
      <div>错误数</div>
      <div>js错误率</div>
      <div>影响用户人数</div>
    </div>
    <div class="Details">
      <div>{{errorNumber}}</div>
      <div>{{errorProbability}}</div>
      <div>{{influenceNumber}}</div>
    </div>
    <div id="main"></div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="分类：">
              <span>{{ props.row.kind }}</span>
            </el-form-item>
            <el-form-item label="检测元素：">
              <span>{{ props.row.selector }}</span>
            </el-form-item>
            <el-form-item label="错误类型：">
              <span>{{ props.row.errorType }}</span>
            </el-form-item>
            <el-form-item label="报错信息：">
              <span>{{ props.row.message }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        prop="timestamp">
      </el-table-column>
      <el-table-column
        label="当前页面地址"
        prop="url">
      </el-table-column>
      <el-table-column
        label="浏览器类型"
        prop="userAgent">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'

import * as echarts from 'echarts';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,

        tableData: [],
        gridData: [],
        dialogTableVisible: false,

        errorNumber: 0,
        errorProbability: 0+'%',
        influenceNumber: 0,
    }
  },
  created() {
    this.apiarrcge()
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleClick(row) {
        console.log(row);
    },
    apiarrcge(){
      this.$api.Logs.getError(1).then((res)=>{
        this.errorNumber = res.data.data.length
        this.errorProbability = Math.floor(res.data.data.length/(12+res.data.data.length)*100)+'%';
        var arr = res.data.data
        var resultArr = [];
        for (let i = 0; i < arr.length; i++) {
          for (var j = 0; j < resultArr.length; j++) {
              if (resultArr[j].uuid == arr[i].uuid) {
                  break;
              }
          }
          if (j == resultArr.length) {
              resultArr[resultArr.length] = arr[i];
          }
        }
        this.influenceNumber = resultArr.length;
        res.data.data.forEach(e => {
          this.tableData.push({
            id: e._id,
            timestamp: e.timestamp.replace('T',' ').slice(0,19),
            url: e.url,
            userAgent: e.userAgent,
            kind: e.kind,
            selector: e.selector,
            errorType: e.errorType,
            message: e.message});  
        })
        this.mounted();
     })
     },
    mounted(){
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var date = new Date();
    var NowDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    var dayNumber = 0;
    this.$api.Logs.getError(1).then((res)=>{
      if(res.data.data[res.data.data.length-1].timestamp.slice(0,10) == NowDate){
          dayNumber = 0;
          for(let i = res.data.data.length-1;i >= 0;i--){
            if(res.data.data[i].timestamp.slice(0,10) == NowDate){
              dayNumber++;
            }else{
              break;
            }
          }
        }else{
          dayNumber = 0;
        }
    });
    function changeDate(NowDate,index){
      let arr = NowDate.split('-');
      if(arr[2] > index){
        let result = arr[2]-index
        return arr[0]+'-'+arr[1]+'-'+result
      }else if(arr[2] <= index){
        arr[2] = index-arr[2]+30;
        arr[1]--;
        return arr[0]+'-'+arr[1]+'-'+arr[2]
      }
    }
    
    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '30%']
      },
      visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: 'rgba(0, 0, 180, 0.4)'
          },
          {
            gt: 5,
            lt: 7,
            color: 'rgba(0, 0, 180, 0.4)'
          }
        ]
      },
      series: [
        {
          type: 'line',
          smooth: 0.6,
          symbol: 'none',
          lineStyle: {
            color: '#5470C6',
            width: 5
          },
          markLine: {
            symbol: ['none', 'none'],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
          },
          areaStyle: {},
          data: [
            [changeDate(NowDate,8), 2],
            [changeDate(NowDate,7), 5],
            [changeDate(NowDate,6), 7],
            [changeDate(NowDate,5), 5],
            [changeDate(NowDate,4), 2],
            [changeDate(NowDate,3), 3],
            [changeDate(NowDate,2), 4],
            [changeDate(NowDate,1), 3],
            [NowDate,dayNumber]
          ]
        }
  ]
};

option && myChart.setOption(option);
}}
}
</script>

<style>
#main{
  height: 400px;
}
.top{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 30px;
  font-size: 12px;
  color: rgba(150, 161, 169, 0.976);
}
.Details{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 10px;
  font-size: 25px;
  font-weight: 600;
  color: rgba(26, 29, 30, 0.976);
}

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

